<template>
    <div>
      生命周期钩子函数
  
      <button class="btn" @click="count++">点击</button>
      <p>{{count}}</p>
    </div>
  </template>
  <script setup>
  import {onMounted,onBeforeUpdate,ref,onUnmounted} from 'vue'
  
  const count = ref(0)
  onMounted(()=>{
    console.log('组件挂载完成');
  })
  onBeforeUpdate(()=>{
    console.log('组件更新之前');
  })
  
  onUnmounted(()=>{
    console.log('组件卸载之前');
  })
  </script>
  <style scoped>
  .btn {
    width: 80px;
    height: 38px;
    background-color: #409eff;
    border: none;
    border-radius: 5px;
    color: #fff;
  }
  </style>